<!-- 鼠标滑过时，悬浮控制组件 -->
<template>
  <div class="component-control" :class="comIndex == 0 ? 'topArrow' : ''">
    <div class="control-text" @click.stop="gotoEdit">编辑模块</div>
    <div class="control-icons">
      <!-- 上移 -->
      <a-tooltip>
        <template slot="title"> 上移 </template>
        <i
          class="iconfont icon-mokuai-xia"
          :class="
            comIndex == 0 || withHeader('top') || currentPageType == 1
              ? 'disabled'
              : ''
          "
          @click.stop="changePosition('top')"
        ></i>
      </a-tooltip>

      <!-- 下移 -->
      <a-tooltip>
        <template slot="title"> 下移 </template>
        <i
          class="iconfont icon-mokuai-shang"
          :class="
            comIndex == templateLength - 1 ||
            comItem.comName == 'pageHeader' ||
            currentPageType == 1
              ? 'disabled'
              : ''
          "
          @click.stop="changePosition('down')"
        ></i>
      </a-tooltip>

      <!-- 删除 -->
      <a-tooltip>
        <template slot="title"> 删除 </template>
        <i
          class="iconfont icon-mokuai-shanchu"
          :class="
            comItem.comName == 'pageHeader' || currentPageType == 1
              ? 'disabled'
              : ''
          "
          @click.stop="deleteCom"
        ></i>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "comControl",
  components: {},
  props: {
    comIndex: {
      type: Number,
      default: 0,
    },
    comItem: {
      type: Object,
      default: {},
    },
    templateLength: {
      type: Number,
      default: 0,
    },
    templates: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    // 当前页面
    currentPageType() {
      return this.$diyObser.store.currentPage.page_type || "0";
    },
  },
  mounted() {},
  methods: {
    // 点击编辑组件按钮
    gotoEdit() {
      this.$emit("gotoEditCom", { index: this.comIndex });
    },
    // 点击调换组件位置
    changePosition(type) {
      if (this.currentPageType == 1) return;
      if (type == "top" && this.comIndex == 0) return;
      if (type == "top" && this.withHeader("top")) return;
      if (type == "down" && this.comIndex == this.templateLength - 1) return;
      if (type == "down" && this.comItem.comName == "pageHeader") return;
      this.$emit("changeComPosition", { index: this.comIndex, type });
    },
    // 点击删除组件
    deleteCom() {
      if (this.currentPageType == 1) return;
      if (this.comItem.comName == "pageHeader") return;
      this.$emit("deleteCom", { index: this.comIndex });
    },
    withHeader(type) {
      if (this.comIndex == 0) return true;
      if (type == "top") {
        let item = this.templates[this.comIndex - 1];
        if (item.comName == "pageHeader") return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.component-control {
  width: 181px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #f0f2f5;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 4px;
  top: -36px;
  z-index: 600;
  .control-text {
    line-height: 20px;
    color: #595959;
    width: 78px;
    text-align: center;
    border-right: 1px solid #f0f2f5;
    cursor: pointer;
  }
  .control-text:hover {
    color: #1890fc;
  }
  .control-icons {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .iconfont {
      font-size: 19px;
      cursor: pointer;
    }
    .iconfont:hover {
      color: #1890fc;
    }
    .disabled {
      color: #eee !important;
    }
  }
}
.topArrow {
  top: 0;
  bottom: 0px;
}
</style>
